<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <style>
      .slider {
        border-radius: 5px;
        background: #e0e0e0;
        background: linear-gradient(left top, #e0e0e0, #eeeeee);
        width: 310px;
        height: 15px;
        margin: 5px;
      }

      .thumb {
        width: 10px;
        height: 25px;
        border-radius: 3px;
        position: relative;
        left: 10px;
        top: -5px;
        background: blue;
        cursor: pointer;
      }
    </style>
  </head>

  <body>
    <div id="slider" class="slider">
      <div class="thumb"></div>
    </div>

    <script>
      // ...your code...
      const thumb = document.querySelector(".thumb");
      thumb.onmousedown = function (e) {
        e.preventDefault();

        let shiftX = event.clientX - thumb.getBoundingClientRect().left;

        moveAt(e);

        function moveAt(event) {
          let newLeft =
            event.clientX - shiftX - slider.getBoundingClientRect().left;

          if (newLeft < 0) {
            newLeft = 0;
          }

          let rightEdge = slider.offsetWidth - thumb.offsetWidth;
          if (newLeft > rightEdge) {
            newLeft = rightEdge;
          }

          thumb.style.left = newLeft + "px";
          // thumb.style.top = pageY - shiftY + "px";
        }

        function onMouseMove(event) {
          moveAt(event);
        }

        function onMouseUp() {
          document.removeEventListener("mousemove", onMouseMove);
          document.removeEventListener("mouseup", onMouseUp);
        }

        // 在 mousemove 事件上移动球
        document.addEventListener("mousemove", onMouseMove);
        document.addEventListener("mouseup", onMouseUp);
      };

      thumb.ondragstart = function () {
        return false;
      };
    </script>
  </body>
</html>
